function headerImgSet(){
  document.getElementById("header-img").style.width =  document.body.clientWidth - 200;
  document.getElementById("header-img").style.height = 100;
}

function validateNonEmpty(inputField, helpText) {
  // See if the input value contains any text
  if (inputField.value.length == 0){
    // The data is invalid, so notify the user
    if (helpText != null) {
      helpText.innerHTML = "Please enter a value.";
    }
    return false;
  } else {
    // The date is OK, so clear the help message
    if (helpText != null) {
      helpText.innerHTML = "";
    }
  }
  return true;
}

function validateLength(minLength,maxLength,inputField,helpText){
  // See if the input value contains at least minLength but no more than maxLength characters
  if (inputField.value.length > maxLength || inputField.value.length < minLength) {
    // The data is invalid, so set the help message
    if (helpText != null) {
      helpText.innerHTML = "Please enter a value "+minLength+" to "+maxLength+" characters in length";
      return false;
    }
  } else {
    // The data is OK, so clear the help message
    if (helpText != null){
      helpText.innerHTML = "";
      return true;
    }
  }
}

function validateZIPCode(inputField, helpText) {
  // First see if the input value length is anything other than 5
  if (inputField.value.length != 5) {
    // The data is invalid, so set the help message
    if (helpText != null) {
      helpText.innerHTML = "Please enter exactly five digits.";
      return false;
    }
  } 
  // Then see if the input is a number 
  else if (isNaN(inputField.value)) {
    // The data is invalid, so set the help message
    if (helpText != null){
      helpText.innerHTML = "Please enter a number.";
      return false;
    }
  } else {
    // The data is OK, so clear the help message
    if (helpText != null) {
      helpText.innerHTML = "";
      return true;
    }
  }
}

function placeOrder(form) {
  if (
    validateLength(1,32,form["message"],document.getElementById("message_help")) &&
    validateZIPCode(form["zip"],document.getElementById("zip_help")) &&
    validateDate(form["date"],document.getElementById("date_help")) &&
    validateNonEmpty(form["name"],document.getElementById("name_help")) &&
    validatePhone(form["phone"],document.getElementById("phone_help")) &&
    validateEmail(form["address"],document.getElementById("address_help"))
  ) {
    alert("Submit the form.");
  } else {
    alert("I'm sorry but there is something wrong with the order information.");
  }
}

function validateRegEx(regex, inputStr, helpText, helpMessage) {
  // See if the inputStr data validates OK
  if (!regex.test(inputStr)){
    // The data is invalid, so set the help message and return false
    if (helpText != null){
      helpText.innerHTML = helpMessage;
    }
    return false;
  } else {
    // The data is OK, so clear the help message and return true
    if (helpText != null){
      helpText.innerHTML = "";
    }
    return true;
  }
}

function validateDate(inputField, helpText) {
  // First see if the input value contains data
  if (!validateNonEmpty(inputField, helpText)){
    return false;
  }
  // Then see if the input value is a date
  return validateRegEx(/^\d{2}\/\d{2}\/\d{4}$/,inputField.value,helpText,"Please enter a date(for example,01/14/1975).");
}

function validatePhone(inputField, helpText){
  // First see if the input value contains data
  if (!validateNonEmpty(inputField, helpText)){
    return false;
  }
  // Then see if the input value is a phone number
  return validateRegEx(/^\d{3}-\d{3}-\d{4}$/,inputField.value,helpText,"Please enter a phone number (for example, 123-456-7890).");
}

function validateEmail(inputField, helpText){
  // First see if the input value contains data
  if (!validateNonEmpty(inputField, helpText)){
    return false;
  }
  // Then see if the input value is an email address
  return validateRegEx(/^[\w\.-_\+]+@[\w-]+(\.\w{2,4})+$/,inputField.value,helpText,"Please enter an email address(for example, johndoe@acme.com).");
}

window.onload = function() {
  headerImgSet();
  window.onresize = headerImgSet;
  document.getElementById("order").message.onblur = function(){
    validateLength(1, 32, document.getElementById("order").message, document.getElementById("message_help"));
  }
  document.getElementById("order").zip.onblur = function(){
    validateZIPCode(document.getElementById("order").zip, document.getElementById("zip_help"));
  }
  document.getElementById("order").date.onblur = function(){
    validateDate(document.getElementById("order").date, document.getElementById("date_help"));
  }
  document.getElementById("order").name.onblur = function(){
    validateNonEmpty(document.getElementById("order").name, document.getElementById("name_help"));
  }
  document.getElementById("order").phone.onblur = function(){
    validatePhone(document.getElementById("order").phone, document.getElementById("phone_help"));
  }
  document.getElementById("order").address.onblur = function(){
    validateEmail(document.getElementById("order").address, document.getElementById("address_help"));
  }

  document.getElementById("order").submit_button.onclick = function(){
    placeOrder(document.getElementById("order"));
  };
}
